 #Colorbar {
	width: 100%;
	height: 6px;
 }	

#Colorbar .bar {
	float: left;
	height: 6px;
}

#Colorbar .one { width: 15%; background: #ff0000; }
#Colorbar .two { width: 14%; background: #ffc414; }
#Colorbar .three { width: 14%; background: #ffff00; }
#Colorbar .four { width: 14%; background: #6cb30b; }
#Colorbar .five { width: 14%; background: #328bdc; }
#Colorbar .six { width: 14%; background: #6900a2; }
#Colorbar .seven { width: 15%; background: #e33072; }

.one {
-webkit-animation-name: one;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.two {
-webkit-animation-name: two;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.three {
-webkit-animation-name: three;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.four {
-webkit-animation-name: four;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.five {
-webkit-animation-name: five;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.six {
-webkit-animation-name: six;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.seven {
-webkit-animation-name: seven;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes one {
from { background-color: #ff0000; }
8% { background-color: #ffc414; }
24% { background-color: #ffff00; }
40% { background-color: #6cb30b; }
56% { background-color: #328bdc; }
72% { background-color: #6900a2; }
88% { background-color: #e33072; }
to { background-color: #ff0000; }
}

@-webkit-keyframes two {
from { background-color: #ffc414; }
8% { background-color: #ffff00; }
24% { background-color: #6cb30b; }
40% { background-color: #328bdc; }
56% { background-color: #6900a2; }
72% { background-color: #e33072; }
88% { background-color: #ff0000; }
to { background-color: #ffc414; }
}

@-webkit-keyframes three {
from { background-color: #ffff00; }
8% { background-color: #6cb30b; }
24% { background-color: #328bdc; }
40% { background-color: #6900a2; }
56% { background-color: #e33072; }
72% { background-color: #ff0000; }
88% { background-color: #ffc414; }
to { background-color: #ffff00; }
}

@-webkit-keyframes four {
from { background-color: #6cb30b; }
8% { background-color: #328bdc; }
24% { background-color: #6900a2; }
40% { background-color: #e33072; }
56% { background-color: #ff0000; }
72% { background-color: #ffc414; }
88% { background-color: #ffff00; }
to { background-color: #6cb30b; }
}

@-webkit-keyframes five {
from { background-color: #328bdc; }
8% { background-color: #6900a2; }
24% { background-color: #e33072; }
40% { background-color: #ff0000; }
56% { background-color: #ffc414; }
72% { background-color: #ffff00; }
88% { background-color: #6cb30b; }
to { background-color: #328bdc; }
}

@-webkit-keyframes six {
from { background-color: #6900a2; }
8% { background-color: #e33072; }
24% { background-color: #ff0000; }
40% { background-color: #ffc414; }
56% { background-color: #ffff00; }
72% { background-color: #6cb30b; }
88% { background-color: #328bdc; }
to { background-color: #6900a2; }
}

@-webkit-keyframes seven {
from { background-color: #e33072; }
8% { background-color: #ff0000; }
24% { background-color: #ffc414; }
40% { background-color: #ffff00; }
56% { background-color: #6cb30b; }
72% { background-color: #328bdc; }
88% { background-color: #6900a2; }
to { background-color: #e33072; }
}